<template>
  <div id="app">
    <yn-spin :spinning="spinning" size="large">
      <yn-locale-provider :locale="locale">
        <MainFrame />
      </yn-locale-provider>
    </yn-spin>
  </div>
</template>

<script>
import AppRouter from "yn-p1/libs/config/navi/router";
import MainFrame from "@/views/platform/ui/MainFrame";
import "yn-p1/libs/themes/style/yn-app.less";
import "yn-p1/libs/components/yn-spin/";
import "yn-p1/libs/components/yn-locale-provider/";
import UiUtils from "yn-p1/libs/utils/UiUtils";
import DsUtils from "yn-p1/libs/utils/DsUtils";
import RouterUtils from "yn-p1/libs/utils/RouterUtils";
import { APPS, BACKEND } from "@/config/SETUP";
import menuStructure from "@/config/navi/menuStructure.js";
import customMenuStructure from "@/custom/config/navi/menuStructure.js";
import { OPERATION } from "@/config/custom/";
import Logger from "yn-p1/libs/modules/log/logger";
import moment from "moment";
import "moment/locale/zh-cn";

export default {
  name: "app",
  data() {
    return {
      screenWidth: 0,
      spinning: false,
      locale: null
    };
  },
  beforeCreate() {
    DsUtils.init(BACKEND.BASE_URL, APPS.NAME);
    UiUtils.init(this);
    RouterUtils.init(this);
  },
  components: {
    MainFrame
  },
  created() {
    let language = APPS.LANGUAGE || "zh_CN";
    if (language === "zh_CN") {
      moment.locale("zh-cn");
    }
    import(`ant-design-vue/lib/locale-provider/${language}`).then(m => {
      this.locale = m.default;
    });
    AppRouter.loadMenu(this, this.getMergedMenuStructure());
  },
  methods: {
    setWidth() {
      this.screenWidth = document.body.offsetWidth;
    },
    getMergedMenuStructure() {
      const mergedMenuStructure = [...menuStructure];
      customMenuStructure.forEach(customMenu => {
        let { operation = OPERATION.INSERT_AFTER, target } =
          customMenu.custom || {};
        let mergedMenuIndex = -1;
        if (target) {
          mergedMenuIndex = mergedMenuStructure.findIndex(
            mergedMenu => mergedMenu.meta.appId === target
          );
        } else {
          mergedMenuIndex = mergedMenuStructure.length - 1;
        }
        switch (operation) {
          case OPERATION.DELETE:
            mergedMenuStructure.splice(mergedMenuIndex, 1);
            break;
          case OPERATION.INSERT_BEFORE:
            mergedMenuStructure.splice(mergedMenuIndex, 0, customMenu);
            break;
          case OPERATION.INSERT_AFTER:
            mergedMenuStructure.splice(mergedMenuIndex + 1, 0, customMenu);
            break;
          case OPERATION.REPLACE:
            mergedMenuStructure.splice(mergedMenuIndex, 1, customMenu);
            break;
          default:
            Logger.error(
              `operation ${operation} in custom menu structure is not supported`
            );
            break;
        }
        delete customMenu.custom;
      });
      return mergedMenuStructure;
    }
  },
  mounted() {
    let that = this;
    that.setWidth();
    window.onresize = () => {
      that.setWidth();
    };
  }
};
</script>

<style>
#app > .ant-spin-nested-loading {
  height: 100%;
  position: static; /* fix the tree context menu position is not right issue. */
}
#app > .ant-spin-nested-loading > .ant-spin-container {
  position: static; /* fix the tree context menu position is not right issue. */
}

#app > .ant-spin-nested-loading > div > .ant-spin-spinning {
  max-height: inherit;
}
</style>
